<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/category.css" />
</head>

<body>
    <div class="category-container">
        <div class="category-div">
            <div class="category-title">理论赛 题目分类</div>
            <div class="category-content">
                <div class="category-item"><span class="num-span">50</span>理论题<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item"><span class="num-span">0</span>金砖大赛<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item add-category lls-add-btn"><img src="../../admin/images/category/bq_add.png" class="add-category-icon" />分类</div>
            </div>
        </div>
        <div class="category-div">
            <div class="category-title">解体赛 题目分类</div>
            <div class="category-content">
                <div class="category-item"><span class="num-span">50</span>理论题<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item"><span class="num-span">120</span>金砖大赛<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item add-category jts-add-btn"><img src="../../admin/images/category/bq_add.png" class="add-category-icon" />分类</div>
            </div>
        </div>
        <div class="category-div">
            <div class="category-title">攻防赛 题目分类</div>
            <div class="category-content">
                <div class="category-item"><span class="num-span">50</span>理论题<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item"><span class="num-span">120</span>金砖大赛<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item add-category gfs-add-btn"><img src="../../admin/images/category/bq_add.png" class="add-category-icon" />分类</div>
            </div>
        </div>
        <div class="category-div">
            <div class="category-title">新攻防赛 题目分类</div>
            <div class="category-content">
                <div class="category-item"><span>50</span>理论题<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item"><span>120</span>金砖大赛<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item add-category xgfs-add-btn"><img src="../../admin/images/category/bq_add.png" class="add-category-icon" />分类</div>
            </div>
        </div>
        <div class="category-div">
            <div class="category-title">工具 分类</div>
            <div class="category-content">
                <div class="category-item"><span>50</span>理论题<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item"><span>120</span>金砖大赛<img class="sc-btn" src="../../admin/images/category/bq_sc@2x.png" /></div>
                <div class="category-item add-category gj-add-btn"><img src="../../admin/images/category/bq_add.png" class="add-category-icon" />分类</div>
            </div>
        </div>
        <div id="categoryFormLayer" class="category-form-layer">
            <form class="layui-form">
                <div class="layui-form-item ">
                    <label class="layui-form-label"><span class="required-span">*</span>分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入分类名称"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
			var form = layui.form;
            var $ = layui.jquery;
            $('.lls-add-btn').on('click', function(){
                openLayer(1);
            });
            $('.jts-add-btn').click(function(){
                openLayer(2);
            });
            $('.gfs-add-btn').click(function(){
                openLayer(3);
            });
            $('.xgfs-add-btn').click(function(){
                openLayer(4);
            });
            $('.gj-add-btn').click(function(){
                openLayer(5);
            });
            function openLayer(id){
                layer.open({
                    type: 1,
                    skin: 'previewImg',
                    title: '<div class="height: 10px; width: 1px; border: 1px solid red;"></div>新增分类',
                    content: $("#categoryFormLayer"), // 获取ID为formLayer的DOM元素
                    area: ['500px', '220px'],
                    btn: ['提交', '取消'],
                    shadeClose: false,success: function(layero, index){
                        var shade = $('.layui-layer-shade');
                        console.log(layer.zIndex);
                        shade.css('z-index', 899);
                    },
                    yes: function(index, layero){
                        // 表单提交事件
                        // 触发提交事件
                        form.on('submit(formSubmit)', function(data){
                        // 发送Ajax请求提交表单
                        // $.post('path/to/your/server/endpoint', data.field, function(response){
                        //     layer.msg('表单提交成功!', {time: 1000});
                        //     // 关闭弹框
                        //     layer.close(index);
                        // });
                        return false; // 阻止表单默认提交
                        });
                    }
                });
            }

        });

    </script>
</body>

</html>